<template>
  <div class="pages posmanagementList">
    <div class="pageLevel">
      <!-- 操作框 -->
      <div class="operationBox tableSearch">
        <el-button type="primary" v-if="setRole('新建')" :disabled="dis" @click="add()" size="mini">新建</el-button>
      </div>
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item label="" label-width="15px">
            <el-input class="input" v-model="selectdata.keyword" size="small" placeholder="输入设备名称或编号"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="15px">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="searchSelect" :disabled="dis" class="Button">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
          <el-table-column prop="code" label="设备编号" align="center">
            <template slot-scope="scope">
              <el-input v-if="scope.row.show==true" class="input" v-model="scope.row.code" size="small"></el-input>
              <span v-if="scope.row.show==false">{{scope.row.code}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="设备名称" align="center">
            <template slot-scope="scope">
              <el-input v-if="scope.row.show==true" class="input" v-model="scope.row.name" size="small"></el-input>
              <span v-if="scope.row.show==false">{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="equiModel" align="center" label="型号">
            <template slot-scope="scope">
              <el-select v-model="scope.row.equiModel" placeholder="请选择" v-if="scope.row.show==true">
                <el-option v-for="item in addOptionList" :key="item.key" :label="item.value" :value="item.key">
                </el-option>
              </el-select>
              <span v-if="scope.row.show==false">
                <span v-if="scope.row.equiModel === 'D1'">商米D1</span>
                <span v-else-if="scope.row.equiModel === 'D2'">商米D2</span>
                <span v-else-if="scope.row.equiModel === 'BY'">宝盈</span>
                <span v-else>{{scope.row.equiModel}}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="macAddress" align="center" label="mac地址">
            <template slot-scope="scope">
              <el-input v-if="scope.row.show==true" class="input" v-model="scope.row.macAddress" size="small"></el-input>
              <span v-if="scope.row.show==false">{{scope.row.macAddress}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="machineSeries" align="center" label="机器串号">
            <template slot-scope="scope">
              <el-input v-if="scope.row.show==true" class="input" v-model="scope.row.machineSeries" size="small"></el-input>
              <span v-if="scope.row.show==false">{{scope.row.machineSeries}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="shopName" align="center" label="所属门店" v-if="soUrce!='5'">
            <template slot-scope="scope">
              <el-select size="small" v-if="scope.row.show==true" v-model="scope.row.shopName" placeholder="请选择">
                <el-option v-for="item in options3" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
              <span v-if="scope.row.show==false">{{scope.row.shopName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="small" :disabled="dis" v-if="scope.row.show==false" @click="handleEdit(scope.$index,scope.row.id)" type="text" class="addDetail">
                <span v-if="scope.row.shopName===''&&setRole('修改')"> 修改</span>
              </el-button>
              <el-button size="small" :disabled="dis" v-if="scope.row.show==false && setRole('删除')" @click="del(scope.$index,scope.row.id)" type="text" class="delete">删除</el-button>
              <el-button size="small" :disabled="dis" v-if="scope.row.show==false && setRole('解绑')&&scope.row.shopId!=''" @click="untie(scope.$index,scope.row,scope.row.id)" type="text" class="addDetail">解绑</el-button>
              <el-button size="small" v-if="scope.row.show==true" @click="save(scope.$index)" type="text" class="addDetail">保存</el-button>
              <el-button size="small" v-if="scope.row.show==true" @click="cancel(scope.$index)" type="text" class="addDetail">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button :disabled="dis" size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20,30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import {
  getDeviceListPage,
  storeList,
  deleteDevice,
  untieDevice,
  saveOrUpdateDevice,
  findEquiModelList
} from "@/api";
export default {
  computed: mapState(["merchantId", "power", "soUrce"]),
  data() {
    return {
      // 门店的权限
      loading: false,
      changestore: true,
      brandname: "",
      radio: "",
      dialogTableVisible: false,
      gridData: [],
      dis: false,
      diss: false,
      // 搜索框
      selectdata: {
        select: "",
        status: "",
        keyword: ""
      },
      selectdatas: {
        select: "",
        status: "",
        keyword: ""
      },
      showmore: false,
      options: [],
      // 表格
      tableData: [],
      // 分页开始
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      total: 0,
      pageSize2: 20,
      totalItems2: 0,
      currentPage2: 1,
      options3: [],
      name: "",
      ids: "",
      storeid: "",
      addOptionList: []
    };
  },
  created() {},
  mounted() {
    this.posstorelist();
    this.postableget(20, 1);
  },
  methods: {
    // 门店不显示新建，修改，删除，解绑
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    searchSelect() {
      this.selectdatas = this.selectdata;
      this.postableget(20, 1);
    },
    //表格
    postableget(pageSize, pageNum) {
      let data = {
        keyword: this.selectdatas.keyword,
        pageSize: pageSize,
        pageNum: pageNum,
        orgId: this.merchantId
      };
      getDeviceListPage(data).then(res => {
        this.totalItems = res.data.pageTotal;
        for (let i = 0; i < res.data.list.length; i++) {
          res.data.list[i].show = false;
        }

        this.tableData = JSON.parse(JSON.stringify(res.data.list));
        // this.tableData = res.data.list;
      });
    },

    //修改
    handleEdit(i, id) {
      this.ids = id;
      this.dis = true;
      this.tableData[i].show = true;
    },
    // 删除按钮
    del(i, id) {
      this.$confirm("确定要删除吗?", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false
      }).then(() => {
        let data = {
          id: id
        };
        deleteDevice(data).then(res => {
          if (res.code == "200") {
            this.postableget(20, 1);
            this.$message({
              type: "success",
              message: res.msg
            });
          }
        });
      });
    },
    //    解绑
    untie(i, rows, id) {
      if (rows.shopName == "") {
        this.$message({
          type: "error",
          message: "所属门店为空"
        });
      } else {
        this.$confirm("确定要解绑吗?", "提示", {
          center: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          closeOnClickModal: false,
          closeOnPressEscape: false
        }).then(() => {
          let data = {
            id: id
          };
          untieDevice(data).then(res => {
            if (res.code == "200") {
              this.postableget(20, 1);
              this.$message({
                type: "success",
                message: res.msg
              });
            }
          });
        });
      }
    },
    save(i) {
      let shopName_data = this.tableData[i].shopName;
      for (let j = 0; j < this.options3.length; j++) {
        if (shopName_data == this.options3[j].name) {
          shopName_data = this.options3[j].id;
          break;
        }
      }
      let soUrce_data=''
      if (this.soUrce == "5") {
        shopName_data = this.merchantId;
      }
      let postdata = {
        code: this.tableData[i].code,
        name: this.tableData[i].name,
        equiModel: this.tableData[i].equiModel,
        shopId: shopName_data,
        macAddress: this.tableData[i].macAddress,
        machineSeries: this.tableData[i].machineSeries,
        id: this.ids,
        orgId: this.merchantId,
      };

      saveOrUpdateDevice(postdata).then(res => {
        if (this.ids != "") {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg
            });
            this.tableData[i].show = false;
            this.dis = false;
            this.postableget(20, 1);
            this.ids = "";
          }
        } else {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg
            });
            this.dis = false;
            this.postableget(20, 1);
            this.ids = "";
          }
        }
      });
    },
    // 取消-将表格新加的一条数据删除
    cancel(i) {
      this.dis = false;
      this.postableget(20, 1);
    },
    //跳页
    toPage() {
      this.postableget(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.postableget(this.pageSize, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.postableget(this.pageSize, this.currentPage);
    },
    add() {
      this.dis = true;
      let newele = {
        code: "",
        name: "",
        equiModel: "",
        shopName: "",
        show: true
      };
      this.tableData.unshift(newele);
    },
    // 所属门店弹窗
    posstorelist() {
      let data = {
        orgId: this.merchantId
      };
      storeList(data).then(res => {
        this.options3 = res.data;
      });
      // TODO 增加型号列表
      let source_data=''
      if (this.soUrce == "5") {
        source_data = '5'
      }
      let datas={
        source:source_data
      }
      findEquiModelList(datas).then(res => {
        this.addOptionList = res.data.list;
      });
    }
  }
};
</script>
<style scoped>
.showmore {
  display: block;
}
</style>
<style>
.addshopname .input .el-input {
  width: 40px;
}
.addshopname .input .el-select .el-input {
  width: 90px;
}
.quan .el-radio__label {
  display: none;
}
</style>

